<template>
  <q-dialog class="my_dialog" v-model="isFlagShow">
    <q-card class="my-card q-mx-lg">
      <q-toolbar class="row items-center my_form_header">
        <div class="my-tableTitle">
          {{dlgTitle}}
        </div>
        <q-space />
        <q-btn flat round dense icon="mdi-close" @click="close"/>
      </q-toolbar>
      <q-separator />
      <q-card-setion class="q-mx-sm">
        <q-scroll-area class="my-form-container">
          <div class="col q-gutter-xs">
            <table class="my_form_table">
              <tr class="my_row_height">
                <td class="my_label"><span style="color: red">**</span>组件名称：</td>
                <td class="my_value">
                  <q-input
                    outlined
                    dense
                    v-model="param.comLabel"
                    @blur="v$.comLabel.$touch()"
                    :error="v$.comLabel.$error"
                    error-message="请输入不少2个字符！"
                  />
                </td>
                <td class="my_label"><span style="color: red">**</span>组件类型：</td>
                <td class="my_value">
                  <q-select
                    dense
                    outlined
                    options-dense
                    :options="comTypeArr"
                    v-model="param.type"
                    option-value="label"
                    emit-value
                    options-selected-class="teal"
                    @blur="v$.type.$touch()"
                    :error="v$.type.$error"
                    error-message="请选择状态！"
                  />
                </td>
              </tr>
              <tr class="my_row_height">
                <td class="my_label"><span style="color: red">**</span>图形类型：</td>
                <td class="my_value">
                  <q-select
                    dense
                    outlined
                    options-dense
                    :options="graphTypeArr"
                    v-model="param.graphType"
                    option-value="label"
                    emit-value
                    options-selected-class="teal"
                    @blur="v$.graphType.$touch()"
                    :error="v$.graphType.$error"
                    error-message="请选择图形类型！"
                    @update:model-value="graphItemSelected"
                  />
                </td>
                <td class="my_label"><span style="color: red">**</span>图形地址：</td>
                <td class="my_value">
                  <template v-if="param.graphType === '图元'">
                    <AmyImageSelect
                      :options="tupleList"
                      :current-option="param.graphUrl"
                      @update="refreshGraph"
                    />
                  </template>
                  <template v-else>
                    <AmyIconSelect
                      :icon-arr="iconList"
                      :current-icon="param.graphUrl"
                      @update="refreshGraph"
                    />
                  </template>
                </td>
              </tr>
              <tr class="my_row_height">
                <td class="my_label"><span style="color: red">**</span>组件编码：</td>
                <td class="my_value">
                  <q-input
                    outlined
                    dense
                    v-model="param.comValue"
                    @blur="v$.comValue.$touch()"
                    :error="v$.comValue.$error"
                    error-message="请输入不少2个字符！"
                  />
                </td>
                <td class="my_label">标识码：</td>
                <td class="my_value">
                  <q-input
                    outlined
                    dense
                    readonly
                    v-model="param.comSid"
                  />
                </td>
              </tr>
              <tr class="my_row_height">
                <td class="my_label">组件序码：</td>
                <td class="my_value">
                  <q-input
                    outlined
                    dense
                    v-model="param.sortCode"
                    @blur="v$.sortCode.$touch()"
                    :error="v$.sortCode.$error"
                    error-message="请输入不少2个字符！"
                  />
                </td>
                <td class="my_label">是否可见：</td>
                <td class="my_value">
                  <q-toggle
                    :false-value="0"
                    :true-value="1"
                    v-model="param.visible"
                    label="可见"
                  />
                </td>
              </tr>
              <tr class="my_row_height">
                <td class="my_label">X坐标：</td>
                <td class="my_value">
                  <q-input
                    outlined
                    dense
                    type="number"
                    v-model.number.lazy="param.left"
                  />
                </td>
                <td class="my_label">Y坐标：</td>
                <td class="my_value">
                  <q-input
                    outlined
                    dense
                    type="number"
                    v-model.number.lazy="param.top"
                  />
                </td>
              </tr>
              <tr class="my_row_height">
                <td class="my_label">Width：</td>
                <td class="my_value">
                  <q-input
                    outlined
                    dense
                    type="number"
                    v-model.number.lazy="param.width"
                  />
                </td>
                <td class="my_label">Height：</td>
                <td class="my_value">
                  <q-input
                    outlined
                    dense
                    type="number"
                    v-model.number.lazy="param.height"
                  />
                </td>
              </tr>
              <tr class="my_row_height">
                <td class="my_label">背景色：</td>
                <td class="my_value">
                  <AmyColorPicker v-model:color="param.backgroundColor"/>
                </td>
                <td class="my_label">透明度：</td>
                <td class="my_value">
                  <q-input
                    outlined
                    dense
                    type="number"
                    v-model.number.lazy="param.opacity"
                  />
                </td>
              </tr>
              <tr class="my_row_height">
                <td class="my_label">旋转角度：</td>
                <td class="my_value">
                  <q-input
                    outlined
                    dense
                    type="number"
                    v-model.number.lazy="param.transform"
                  />
                </td>
                <td class="my_label">组件图层：</td>
                <td class="my_value">
                  <q-input
                    outlined
                    dense
                    type="number"
                    v-model.number.lazy="param.zindex"
                  />
                </td>
              </tr>
              <tr class="my_row_height">
                <td class="my_label">边框圆角：</td>
                <td class="my_value">
                  <q-input
                    outlined
                    dense
                    type="number"
                    v-model.number.lazy="param.borderRadius"
                  />
                </td>
                <td class="my_label">边框宽度：</td>
                <td class="my_value">
                  <q-input
                    outlined
                    dense
                    type="number"
                    v-model.number.lazy="param.borderWidth"
                  />
                </td>
              </tr>
              <tr class="my_row_height">
                <td class="my_label">边框颜色：</td>
                <td class="my_value">
                  <AmyColorPicker v-model:color="param.borderColor"/>
                </td>
                <td class="my_label">边框线型：</td>
                <td class="my_value">
                  <q-select
                    dense
                    outlined
                    options-dense
                    :options="lineStyleTypeArr"
                    v-model="param.borderLine"
                    emit-value
                    options-selected-class="teal"
                    @blur="v$.borderLine.$touch()"
                    :error="v$.borderLine.$error"
                    error-message="请选择状态！"
                  />
                </td>
              </tr>
              <tr class="my_row_height">
                <td class="my_label">minWidth：</td>
                <td class="my_value">
                  <q-input
                    outlined
                    dense
                    type="number"
                    v-model.number.lazy="param.minWidth"
                  />
                </td>
                <td class="my_label">minHeight：</td>
                <td class="my_value">
                  <q-input
                    outlined
                    dense
                    type="number"
                    v-model.number.lazy="param.minHeight"
                  />
                </td>
              </tr>
            </table>
          </div>
        </q-scroll-area>
      </q-card-setion>
      <q-separator />
      <div class="q-gutter-sm my_form_footer">
        <q-btn
          unelevated
          dense
          label="提交"
          type="submit"
          color="teal-3"
          @click="onSubmit"
          style="width: 80px"
        />
        <q-btn
          unelevated
          dense
          label="重置"
          type="reset"
          color="orange-3"
          @click="onReset"
          style="width: 80px"
        />
      </div>
    </q-card>
  </q-dialog>
</template>

<script lang="ts">
import { defineComponent, onMounted, onUnmounted, PropType, ref, toRef, toRefs, watch } from 'vue';
import { isObjectEmpty } from '../../../util/utils';
import { minLength, required } from '@vuelidate/validators'
import { useVuelidate } from '@vuelidate/core';
import { cataItem } from '../../../hook/common/useCatalogType';
import { useCatalogTool } from 'src/hook/common/useCatalogTool';

import AmyColorPicker from 'components/basic/AmyColorPicker.vue';
import AmyImageSelect from 'components/basic/AmyImageSelect.vue';
import AmyIconSelect from 'components/basic/AmyIconSelect.vue';
import { HmiComponentItem, HmiComponentItemVO } from './HmiComponentModel';
import { useSysCatalogTbl } from 'src/hook/useSysCatalogTbl';
import { sysCatalogType } from 'src/util/SysBaseConst';


export default defineComponent({
  name: 'ComItemDlg',
  components: {
    AmyColorPicker,
    AmyImageSelect,
    AmyIconSelect
  },
  props: {
    itemData: {
      type: Object as PropType<HmiComponentItem>,
      required: true
    },
    comTypeArr: {
      type: Array as PropType<cataItem[]>,
      required: true
    },
    graphTypeArr: {
      type: Array as PropType<cataItem[]>,
      required: true
    },
    lineStyleTypeArr: {
      type: Array as PropType<cataItem[]>,
      required: true
    }
  },
  emits: ['submit-component-item', 'cancel-component-item'],
  setup (props, context) {
    //数据解构
    const {
      itemData,
      comTypeArr,
      graphTypeArr,
      lineStyleTypeArr
    } = toRefs(props);

    //*******************************
    //      目录操作
    //*******************************
    const {
      findCatalogLabel,
      findCatalogId
    } = useCatalogTool();

    const {
      tupleList,
      iconList,
      getCatalog,
      removeCatalog
    } = useSysCatalogTbl();

    //*******************************
    //      表单项
    //*******************************
    //窗口显示
    let isFlagShow = ref(false);

    //窗口标题
    let dlgTitle = ref('');

    //界面数据
    let param = ref<HmiComponentItemVO>({
      id: 0,
      type: '',
      page: '',
      comLabel: '',
      comValue: '',
      comSid: '',
      graphType: '',
      graphUrl: '',
      left: 50,
      top: 50,
      width: 0,
      height: 0,
      backgroundColor: '',
      opacity: 0,
      visible: 0,
      zindex: 0,
      transform: 0,
      borderWidth: 0,
      borderRadius: 0,
      borderLine: '',
      borderColor: '',
      minWidth: 0,
      minHeight: 0,
      sortCode: '',
      description: ''
    });

    //关闭窗口
    const close = () => {
      isFlagShow.value = false;
      context.emit('cancel-component-item');
    }

    //显示窗口
    const show = (text: string) => {
      isFlagShow.value = true;
      dlgTitle.value = text;
    }

    //提交窗口
    const onSubmit = () => {
      v$.value.$validate();
      if (v$.value.$error) {
        alert('输入参数校验错误!');
      } else {
        //隐藏
        isFlagShow.value = false;
        let item: HmiComponentItem = {
          id: param.value.id,
          typeId: findCatalogId(comTypeArr.value, param.value.type),
          pageId: 0,
          comLabel: param.value.comLabel,
          comValue: param.value.comValue,
          comSid: param.value.comSid,
          graphTypeId: findCatalogId(graphTypeArr.value, param.value.graphType),
          graphUrl: param.value.graphUrl,
          left: param.value.left,
          top: param.value.top,
          width: param.value.width,
          height: param.value.height,
          backgroundColor: param.value.backgroundColor,
          opacity: param.value.opacity,
          visible: param.value.visible,
          zindex: param.value.zindex,
          transform: param.value.transform,
          borderWidth: param.value.borderWidth,
          borderRadius: param.value.borderRadius,
          borderLine: param.value.borderLine,
          borderColor: param.value.borderColor,
          minWidth: param.value.minWidth,
          minHeight: param.value.minHeight,
          sortCode: param.value.sortCode,
          description: param.value.description,
          createTime: '',
          createUserId: 0,
          updateTime: '',
          updateUserId: 0
        };

        //发送数据
        context.emit('submit-component-item', item);
      }
    }

    //重置
    const onReset = () => {
      if (param.value) {
        param.value.type = '';
        param.value.page = '';
        param.value.comLabel = '';
        param.value.comValue = '';
        param.value.comSid = '';
        param.value.graphType = '';
        param.value.graphUrl = '';
        param.value.left = 50;
        param.value.top = 50;
        param.value.width = 0;
        param.value.height = 0;
        param.value.backgroundColor = '';
        param.value.opacity = 0;
        param.value.visible = 0;
        param.value.zindex = 0;
        param.value.transform = 0;
        param.value.borderWidth = 0;
        param.value.borderRadius = 0;
        param.value.borderLine = '';
        param.value.borderColor = '';
        param.value.minWidth = 0;
        param.value.minHeight = 0;
        param.value.sortCode = '';
        param.value.description = '';
      }

      //表单验证初始化
      v$.value.$reset();
    }

    //更新图标
    const refreshGraph = (url: string) => {
      param.value.graphUrl = url;
    }

    //图形类型发生变化
    const graphItemSelected = () => {
      if (param.value.graphType === '图元') {
        getCatalog(sysCatalogType.TUPLE_CODE);
      } else {
        getCatalog(sysCatalogType.ICON_CODE);
      }
    }

    //*******************************
    //      表单校验
    //*******************************
    //配置校验规则
    const rules = {
      id: {},
      type: { required },
      page: {},
      comLabel: { required, minLength: minLength(2) },
      comValue: { },
      comSid: {},
      graphType: { required },
      graphUrl: { required },
      left: { required },
      top: { required },
      width: { required },
      height: { required },
      backgroundColor: {},
      opacity: {},
      visible: {},
      zindex: {},
      transform: {},
      borderWidth: {},
      borderRadius: {},
      borderLine: {},
      borderColor: {},
      minWidth: {},
      minHeight: {},
      sortCode: { required },
      description: {}
    }

    //使用vuelidate，建立变量对应的校验规则
    const v$ = useVuelidate(rules, {
      id: toRef(param.value, 'id'),
      type: toRef(param.value, 'type'),
      page: toRef(param.value, 'page'),
      comLabel: toRef(param.value, 'comLabel'),
      comValue: toRef(param.value, 'comValue'),
      comSid: toRef(param.value, 'comSid'),
      graphType: toRef(param.value, 'graphType'),
      graphUrl: toRef(param.value, 'graphUrl'),
      left: toRef(param.value, 'left'),
      top: toRef(param.value, 'top'),
      width: toRef(param.value, 'width'),
      height: toRef(param.value, 'height'),
      backgroundColor: toRef(param.value, 'backgroundColor'),
      opacity: toRef(param.value, 'opacity'),
      visible: toRef(param.value, 'visible'),
      zindex: toRef(param.value, 'zindex'),
      transform: toRef(param.value, 'transform'),
      borderWidth: toRef(param.value, 'borderWidth'),
      borderRadius: toRef(param.value, 'borderRadius'),
      borderLine: toRef(param.value, 'borderLine'),
      borderColor: toRef(param.value, 'borderColor'),
      minWidth: toRef(param.value, 'minWidth'),
      minHeight: toRef(param.value, 'minHeight'),
      sortCode: toRef(param.value, 'sortCode'),
      description: toRef(param.value, 'description')
    });


    //*******************************
    //      启动模块
    //*******************************
    //初始化
    const init = () => {
      if (!isObjectEmpty(itemData.value)) {
        param.value.id = itemData.value.id;
        param.value.type = findCatalogLabel(comTypeArr.value, itemData.value.typeId);
        param.value.page = '';
        param.value.comLabel = itemData.value.comLabel;
        param.value.comValue = itemData.value.comValue;
        param.value.comSid = '';
        param.value.graphType = findCatalogLabel(graphTypeArr.value, itemData.value.graphTypeId);
        param.value.graphUrl = itemData.value.graphUrl;
        param.value.left = itemData.value.left;
        param.value.top = itemData.value.top;
        param.value.width = itemData.value.width;
        param.value.height = itemData.value.height;
        param.value.backgroundColor = itemData.value.backgroundColor;
        param.value.opacity = itemData.value.opacity;
        param.value.visible = itemData.value.visible;
        param.value.zindex = itemData.value.zindex;
        param.value.transform = itemData.value.transform;
        param.value.borderWidth = itemData.value.borderWidth;
        param.value.borderRadius = itemData.value.borderRadius;
        param.value.borderLine = itemData.value.borderLine;
        param.value.borderColor = itemData.value.borderColor;
        param.value.minWidth = itemData.value.minWidth;
        param.value.minHeight = itemData.value.minHeight;
        param.value.sortCode = itemData.value.sortCode;
        param.value.description = itemData.value.description;
      }

      //表单验证初始化
      v$.value.$reset();

      if (param.value.graphType !== '') {
        graphItemSelected();
      }
    }

    //监听对象的所有属性
    watch(() => itemData, () => {
      init();
    }, { deep: true });

    //启动挂载组件
    onMounted(() => {
      init();
    })

    //卸载组件
    onUnmounted(() => {
      removeCatalog(sysCatalogType.ICON_CODE);
      removeCatalog(sysCatalogType.TUPLE_CODE);
    });

    return {
      itemData,
      comTypeArr,
      graphTypeArr,
      lineStyleTypeArr,
      tupleList,
      iconList,

      isFlagShow,
      dlgTitle,
      param,
      v$,
      init,
      close,
      show,
      onSubmit,
      onReset,
      refreshGraph,
      graphItemSelected
    }
  }
})
</script>

<style lang="scss" scoped>
.my-card {
  alignment: center;
  width: 800px;
  max-width: 800px;

  .my-form-container {
    text-align: center;
    padding: 5px 50px 5px 50px;
    height: 450px;
    max-width: 800px;

    .my-form-table {
      .my_label {
        text-align: left;
        width: 100px;
        padding-bottom: 4px;
      }
      .my_value {
        text-align: left;
        width: 320px;
        padding-bottom: 4px;
      }
    }
  }
}
</style>
